import React, { useEffect, useState } from 'react'
import { Button, Modal, Input, Select, Tree, Table, Tag, Popconfirm, message, Drawer } from 'antd';
import { EditFilled, UserAddOutlined, DeleteOutlined } from '@ant-design/icons'
import menus from '../../routers';
import { addAdminFn, deleteAdminFn, getAdminListFn, updateAdminFn } from '../../api/userLogin';
import { useSelector } from 'react-redux';
import { useTreeData } from '../../utils/hooks';

// 创建一个组件快捷键rfc
export default function Admin() {

  // 获取管理员数据
  const userInfo = useSelector(state => state.user.userInfo)
  const menuList = useTreeData(menus)
  useEffect(() => {
    getAdminList()
  }, [])
  // -----------添加管理员-------------
  // 定义表单数据
  const [adminname, setAdminname] = useState('')
  const [password, setPassword] = useState('')
  const [role, setRole] = useState(1)
  const [checkedKeys, setCheckedKeys] = useState([])
  // 是否显示对话框添加
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 显示的点击事件
  const showModal = () => {

    setIsModalOpen(true);
  };
  // 确定添加管理员
  const handleOk = () => {
    // 收集数据
    // console.log(adminname, password, role, checkedKeys);
    addAdminFn({ adminname, password, role, checkedKeys }).then(res => {
      // console.log(res);
      getAdminListFn().then(res => {
        setAdminList(res.data)
      })
      message.success('添加成功')
      setCheckedKeys([])
      setAdminname('')
      setPassword('')
      setRole(1)
    })
    // 刷新页面
    // window.location.reload()
    setIsModalOpen(false);
  };
  // 取消添加管理员
  const handleCancel = () => {
    message.info('取消添加')
    setIsModalOpen(false);
  };

  const [current, setCurrent] = useState(1)
  const [adminList, setAdminList] = useState([])

  // 获取管理员列表
  const getAdminList = () => {
    getAdminListFn().then(res => {
      // console.log(res.data);
      setAdminList(res.data)
    })
  }


  // -----------添加管理员-------------

  // -----------删除管理员-------------
  // 取消删除
  const deleteCancel = () => {
    message.warning('取消了删除')
  }

  // 管理员删除
  const deleteAdmin = (id) => {
    message.warning('删除了' + id)
    deleteAdminFn(id).then(res => {
      console.log(res);
      // 重新获取管理员列表即可
      getAdminListFn().then(res => {
        console.log(res);
        setAdminList(res.data)
      })
    })
  }
  // -----------删除管理员-------------

  // ---------------------- 编辑管理员 -----------------------
  // 是否显示抽屉
  const [open, setOpen] = useState(false);
  const showDrawer = (r) => {
    setAdminname(r.adminname)
    setPassword(r.password)
    setRole(r.role)
    setCheckedKeys(r.checkedKeys)
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
    setAdminname('')
    setPassword('')
    setRole(1)
    setCheckedKeys([])
  };
// 更新管理员
  const updateClick = () => {
    updateAdminFn({
      adminname: adminname,
      password: password,
      role: role,
      checkedKeys: checkedKeys
    }).then(res => {
      // console.log(res);
      if (res.code == 200) {
        message.success(res.message)
        getAdminList()
      } else {
        message.error(res.message)
      }
      // 重新加载页面,并提示用户退出登录后重新登录即可获得权限
      message.info('请重新登录更新权限')

      setTimeout(() => {
        window.location.reload()
      }, 1000);
      setOpen(false);
    })
  }
  // ---------------------- 编辑管理员 -----------------------
  // table的列配置
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      render: (value, record, index) => <span>{(current - 1) * 8 + index + 1}</span>,
    },
    {
      title: '管理员名称',
      dataIndex: 'adminname',
      key: 'adminname',
    },
    {
      title: '管理员类型',
      dataIndex: 'role',
      key: 'role',
      render: (role) => <>
        {role === 1 ? <Tag color="green">普通管理员</Tag> : <Tag color="red">超级管理员</Tag>}
      </>
    },
    {
      title: '操 作',
      render(r, t, index) {
        return <>
          <Button icon={<EditFilled />} type="primary" variant='outlined' onClick={() => {
            showDrawer(t)
          }} disabled={userInfo?.role == 1 ? true : false}>编辑</Button>
          <Popconfirm
            title="温馨提示"
            // 可以套标签实现样式添加
            description={<span>你确定要删除<span style={{ color: 'red' }}>{t.adminname}</span>吗</span>}
            onConfirm={() => {
              deleteAdmin(t.adminid)
            }}
            onCancel={() => { deleteCancel() }}
            okText="确定"
            cancelText="取消"
          >
            <Button disabled={userInfo?.role == 1 ? true : false} style={{ marginLeft: "10px" }} icon={<DeleteOutlined />} danger>删除</Button>
          </Popconfirm>
        </>
      }
    }
  ]




  return (
    <div>
      <Button disabled={userInfo?.adminname !== 'admin' ? true : false} onClick={showModal} type="primary" icon={<UserAddOutlined />}>
        添加
      </Button>
      {/*管理员列表 */}
      <Table dataSource={adminList} columns={columns} rowKey={'adminid'}
        pagination={{
          current, pageSize: 8, responsive: true,
          onChange(page) {
            setCurrent(page)
          }
        }} />
      {/* 管理员列表 */}


      {/*  -------------  添加管理员的对话框  ------------ */}
      <Modal
        title="添加管理员"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        cancelText="取消"
        okText="确定"
        width='500px'//{500}
      >
        <Input value={adminname} onChange={e => {
          setAdminname(e.target.value)
        }} style={{ width: "400px" }} placeholder="请输入管理员名称" />
        <Input.Password value={password} onChange={e => {
          setPassword(e.target.value)
        }} style={{ width: "400px", margin: "10px 0" }} placeholder="请输入管理员密码" />
        <Select
          value={role}
          onChange={(value) => {
            setRole(value)
          }}
          defaultValue="1"
          style={{ width: "150px" }}
          placeholder={"请选择管理员类型"}
          options={[
            { value: 1, label: <span>普通管理员</span> },
            { value: 2, label: '超级管理员' }
          ]}
        />

        <Tree
          checkable
          defaultExpandAll
          treeData={menuList}
          fieldNames={{ title: 'label' }}
          checkedKeys={checkedKeys}
          onCheck={(e) => {
            // 获取选中的所有内容
            setCheckedKeys(e)
            // console.log(e);

          }}
        // 自定义树节点数据
        />
      </Modal>

      {/*  -------------  添加管理员的对话框  ------------ */}

      {/* -------------------------编辑管理员------------------------- */}
      <Drawer
        title="编辑管理员"
        // 抽屉关闭回调
        onClose={onClose}
        // 抽屉是否打开
        open={open}
      >
        <Input disabled value={adminname} placeholder='请输入管理员名称' />
        <Input.Password disabled value={password} style={{ margin: '10px 0' }} placeholder='请输入管理员密码' />
        <Select value={role} onChange={e => { setRole(e) }} placeholder='请选择管理员类型' style={{ width: '100%' }} options={[{ value: 1, label: <span>普通管理员</span> }, { value: 2, label: <span>超级管理员</span> }]} />

        <Tree
          fieldNames={{ title: 'label' }}
          checkable={true}
          treeData={menuList}
          // 默认展开所有
          defaultExpandAll={true}
          checkedKeys={checkedKeys}
          onCheck={e => {
            setCheckedKeys(e)
          }}
        />
        <Button onClick={updateClick}>确认修改</Button>
      </Drawer>

      {/* -------------------------编辑管理员------------------------- */}
    </div>

  )
}
